<template>
  <div>

    <div slot="footer" class="dialog-footer" style="margin:20px 20px 20px 20px">
      <el-button type="warning" @click="$router.go(-1)">返 回</el-button>
    </div>

    <el-form ref="form" label-width="150px" style="padding-right: 150px">
      <el-form-item label="培训类目：" prop="category">
        <dict-tag :options="dict.type.village_trainings_category" :value="form.category"/>
      </el-form-item>
      <el-form-item label="封面：" prop="imageUrl">
        <el-image
          style="height: 100px"
          :src="image"
        ></el-image>
      </el-form-item>
      <el-form-item label="培训名称：" prop="name">
        {{ form.name }}
      </el-form-item>
      <el-form-item label="培训目的：" prop="purpose">
        {{ form.purpose }}
      </el-form-item>
      <el-form-item label="开始日期：" prop="startTime">
        {{ form.startTime }}
      </el-form-item>
      <el-form-item label="截止日期：" prop="endTime">
        {{ form.endTime }}
      </el-form-item>
      <el-form-item label="培训地点：" prop="location">
        {{ form.location }}
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { getTrainings } from '@/api/village/trainings'
import router from '@/router'
import axios from 'axios'

import log from '@/views/monitor/job/log.vue'
import Log from '@/views/monitor/job/log.vue'

export default {
  name: 'trainingsDetail',
  dicts: ['village_trainings_category'],
  data() {
    return {
      form: '',
      // 用于设置轮播图的高度
      carouselHeight: '500px',
      // 保存图片的URL数组，初始值为空数组
      images: [],
      image:'',
      list: []
    }
  },
  created() {
    this.getDetail()

  },
  methods: {

    router() {
      return router
    },
    // 其他方法可以在这里定义
    getDetail() {
      getTrainings(this.$route.query.id).then(res => {
        this.form = res.data
        this.images = res.data.imageUrl.split(',').map(item => process.env.VUE_APP_BASE_API + item)
        this.image = this.images[0]
        this.formData = res.data
      })
    }
  }
}

</script>

<style>
.image-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.el-input.is-disabled .el-input__inner {
  color: #000000;
}

.el-textarea.is-disabled .el-textarea__inner {
  color: #000000;
}

</style>
